<template>
	<view class="">
		<mescroll-uni ref="mescroll" @getData="getListData">
			<block slot="list">
				<block v-if="list.length > 0">
					<view class="head flex-center">温馨提示:商品如有返现提示请去消费券记录查看，以到账金额为准</view>
					<view class="record-item" v-for="(item, index) in list" :key="index">
						<view class="image-wrap">
							<image :src="$util.img(item.image)" mode="widthFix"
								></image>
						</view>
						<view class="content">
							<view class="name">{{ item.award_name }}</view>
							<view class="cont font-size-goods-tag" v-if="item.award_type == 1">奖励详情：{{ item.point }}个数字资产
							</view>
							<view class="cont font-size-goods-tag" v-if="item.award_type == 2">奖励详情：{{ item.balance }}元红包
							</view>
							<view class="cont font-size-goods-tag" v-if="item.award_type == 3">
								奖励详情：优惠券“{{ item.relate_name }}”</view>
							<view class="cont font-size-goods-tag" v-if="item.award_type == 4">
								奖励详情：{{ item.point }}贡献值</view>
							<view class="time font-size-goods-tag">中奖时间：{{ $util.timeStampTurnTime(item.create_time) }}
							</view>
						</view>
						<view class="btn" v-if="item.award_type == 1"
							@click="$util.redirectTo('/otherpages/member/point/point')">查看</view>
						<view class="btn" v-if="item.award_type == 2"
							@click="$util.redirectTo('/otherpages/member/balance_detail/balance_detail')">查看</view>
						<view class="btn" v-if="item.award_type == 3"
							@click="$util.redirectTo('/otherpages/member/coupon/coupon')">查看</view>
						<view class="btn" v-if="item.award_type == 4" @click="$util.redirectTo('/otherpages/fenxiao/bill/bill')">查看</view>
						
						<view class="btn" v-if="item.award_type == 5 && item.purchase == 1" @click="$util.redirectTo('/otherpages/member/gift/gift')">查看</view>
						<view class="but_lipin" v-if="item.award_type == 5 && item.purchase == 0" @click="$util.redirectTo('/promotionpages/game/payment/payment',{record_id:item.record_id})">立即领取</view>
						
						<view class="btn" v-if="item.award_type == 6 && item.purchase == 1" @click="$util.redirectTo('/pages/order/list/list')">查看</view>
						
						<view class="but_view flex-center" v-if="item.award_type == 6 && item.purchase == 0">
							<view class="but6 flex-center" v-if="item.failure > 0" @click="$util.redirectTo('/promotionpages/game/payment/payment',{record_id:item.record_id})">立即购买</view>
							<view class="but6 flex-center color-disabled but-black" v-else >立即购买</view>
							<view class="but6_title" v-if="item.failure > 0">{{item.failure}}分钟后失效</view>
							<view class="but6_title color-disabled" v-else>已失效</view>
						</view>
						
						<view class="shadow"></view>
					</view>
					<!-- <view class="foot flex-center">~ 没有更多了 ~</view> -->
				</block>
				<block v-else>
					<ns-empty text="暂无中奖记录" :isIndex="false"></ns-empty>
				</block>

				<loading-cover ref="loadingCover"></loading-cover>
			</block>
		</mescroll-uni>
	</view>
</template>

<script>
	import globalConfig from '@/common/js/golbalConfig.js';
	export default {
		data() {
			return {
				list: [],
				id: '',
			};
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id;
			}
			this.token = uni.getStorageSync('token');
		},
		onShow() {
			this.list = [];
			if (this.$refs.mescroll) this.$refs.mescroll.refresh();
		},
		mixins: [globalConfig],
		methods: {
			getListData(mescroll) {
				this.showEmpty = false;
				this.$api.sendRequest({
					url: '/turntable/api/Turntable/getMemberRecord',
					data: {
						id: this.id,
						page: mescroll.num,
						page_size: mescroll.size,
						site_id: 0
					},
					success: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						this.showEmpty = true;
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
						} else {
							this.$util.showToast({
								title: msg
							});
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(newArr); //追加新数据
						mescroll.endBySize(this.list.length,res.data.count)
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.flex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mescroll-uni-content {
		overflow: hidden;
	}

	.head {
		width: 100%;
		height: 78rpx;
		font-size: 23rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 34rpx;
	}

	.record-item {
		display: flex;
		margin-bottom: 16rpx;
		// margin: 20rpx 30rpx 0;
		background-color: #fff;
		// border-radius: 10rpx;
		align-items: center;

		.image-wrap {
			margin-left: 30rpx;
			width: 80rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			border-radius: 10rpx;
			
			image {
				width: 80rpx;
			}
		}

		.content {
			flex: 1;
			padding: 0 20rpx;

			.name {
				margin-top: 20rpx;
				line-height: 1;
				color: $color-title;
				margin-bottom: 30rpx;
			}

			.time{
				margin-bottom: 20rpx;
			}
			.cont {
				color: $color-tip;
				line-height: 1;
				margin-bottom: 10rpx;
			}
		}

		.btn {
			margin-right: 30rpx;
			width: 140rpx;
			height: 56rpx;
			border-radius: 32px;
			border: 1px solid #999999;
			color: #666666;
			padding: 8rpx 0;
			font-size: 24rpx;
			line-height: 40rpx;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.but_lipin{
			margin-right: 30rpx;
			width: 140rpx;
			height: 56rpx;
			border-radius: 32px;
			border: 1px solid #FC6E20;
			color:#FC6E20;
			padding: 8rpx 0;
			font-size: 24rpx;
			line-height: 40rpx;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.but_view{
			margin-right: 30rpx;			
			padding: 8rpx 0;
			text-align: center;
			flex-direction: column;
			.but6{
				width: 140rpx;
				height: 56rpx;
				border-radius: 32px;
				font-size: 24rpx;
				line-height: 40rpx;
				border: 1px solid #FC6E20;
				color:#FC6E20;
				&.but-black {
					border: 1px solid #999999;
				}
			}
			.but6_title{
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FC6E20;
				line-height: 28rpx;
			}
		}
	}
	.foot{
		width: 100%;
		height: 100rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 33rpx;
	}
</style>
